<template>
    <div>
        <h1>测试Vue3</h1>
        <p>计数器1：{{ state.count }}</p>
        <p>计数器2：{{ count }}</p>
        <p>{{ state.message }}</p>
        <p>{{  student }}</p>
        <p>{{ reverseMessage }}</p>
        <Sub type="password">密码：</Sub>
        <button @click="handleClick">++</button>
    </div>
</template>
<script setup>
import { reactive,ref,computed,onMounted } from 'vue';
import Sub from '../components/Sub.vue';
const state = reactive({
    count: 0,
    message: "hello"
});
// const student = reactive({
//     name: "张飞",
//     age: 20
// });
const count = ref(100);
const student = ref({
    name: "张飞",
    age: 20
});
const handleClick = () => {
    state.count++;
    count.value++;
    // student.name = "李四";
    student.value = {name: "李四", age :30};
    // console.log("student",student)
}

const reverseMessage = computed(() => {
    return state.message.split("").reverse().join("");
});

onMounted(() => {
    console.log("mounted")
});
</script>